import React, { Component } from 'react'
import { Menu, Icon } from 'antd';
import { Link, withRouter } from 'react-router-dom'
import menuList from '../../config/menuConfig'
import logo from '../../assets/images/logo192.png'
import './index.less'
import memoryUtils from '../../utils/memoryUtils'

const { SubMenu } = Menu;

class LeftNav extends Component {

    // 判断是否有权限展示(都需要显示)
    // 1. 如果是admin
    // 2. 默认展示isPublic
    // 3. item项中有这个权限
    hasAuth=(item)=>{
        const username = memoryUtils.user.username
        const menus = memoryUtils.user.role.menus
        if(username==='admin' || item.isPublic || menus.indexOf(item.key)!==-1){
            return true
        }else if(item.children){
            // 将内容强制转成布尔值
            return !!(item.children.find(cItem => menus.indexOf(cItem.key)!==-1))
        }
        return false
    }

    /**
     * 根据指定的数据数组生成指定的标签
     */
    getMenuList = (menuList) => {
        const path = this.props.location.pathname
        
        return (menuList.map((item) => {
            // 先判断这个用户是否有这个权限，有这个权限就渲染对应的Menu.Item,如果没有就不渲染
        if(this.hasAuth(item)){
            if (!item.children) {
                return (
                    <Menu.Item key={item.key}>
                        <Link to={item.key}>
                            <Icon type={item.icon} />
                            <span>{item.title}</span>
                        </Link>
                    </Menu.Item>
                )
            } else {
                // const cItem = item.children.find(cItem => cItem.key===path)
                const cItem = item.children.find(cItem => path.indexOf(cItem.key) === 0)
                if (cItem) {
                    // debugger 在还没有运行下一行之前就已经有值，需要调整出现时间
                    this.openKey = item.key
                }
                return (
                    // 判断当前的item.key是否是openKey
                    <SubMenu
                        key={item.key}
                        title={
                            <span>
                                <Icon type={item.icon} />
                                <span>{item.title}</span>
                            </span>
                        }
                    >
                        {this.getMenuList(item.children)}
                    </SubMenu>
                )
            }
        }
        })
      )
    }

    //第一次执行render()之前，一般用于同步操作
    // 
    UNSAFE_componentWillMount() {
        this.meunData = this.getMenuList(menuList)
    }

    // 第一次执行render()之后，一般用于异步操作
    // componentDidMount(){

    // }

    render() {
        let selectKey = this.props.location.pathname
        if (selectKey.indexOf('/admin/product') === 0) {
            selectKey = '/admin/product'
        }
        // console.log(this.openKey) // undefined，需要先获取
        // 先获取到菜单menuList，然后openKey后面才能取到值

        return (
            <div className="left_nav">
                <Link to="/admin/home">
                    <div className="left_nav_header">
                        <img src={logo} alt="" />
                        <h1>后台管理</h1>
                    </div>
                </Link>
                <div>
                    <div style={{ width: 200 }}>
                        <Menu
                            selectedKeys={[selectKey]}
                            defaultOpenKeys={[this.openKey]}
                            mode="inline"
                            theme="dark"
                        >

                            {this.meunData}
                        </Menu>

                        {/* 一般不采用这种直接写内容的，可以将需要填写的内容添加到数组中，通过遍历数组来渲染数据 */}
                        {/* <Menu
                            defaultSelectedKeys={['1']}
                            defaultOpenKeys={[]}
                            mode="inline"
                            theme="dark"
                        >
                            <Menu.Item key="1">
                                <Icon type="pie-chart" />
                                <span>Option 1</span>
                            </Menu.Item>
                            <SubMenu
                                key="sub1"
                                title={
                                    <span>
                                        <Icon type="mail" />
                                        <span>Navigation One</span>
                                    </span>
                                }
                            >
                                <Menu.Item key="5">Option 5</Menu.Item>
                                <Menu.Item key="6">Option 6</Menu.Item>
                                <Menu.Item key="7">Option 7</Menu.Item>
                                <Menu.Item key="8">Option 8</Menu.Item>
                            </SubMenu>
                        </Menu> */}
                    </div>
                </div>
            </div>
        )
    }
}

export default withRouter(LeftNav)

/**
 *
 * 出现的bug：
 * 1. /product/addupdate 和 /product/detail 左侧的nav没有选中 商品管理
 *
 * // 得到当前请求路径, 作为选中菜单项的key
    let selectKey = this.props.location.pathname // /product/xxx
    if (selectKey.indexOf('/product')===0) {
      selectKey = '/product'
    }
 *
 * 2. 左侧的 nav 选中 二级菜单 不展开（在原来的基础上做修改）
 *
 *  如果当前请求路由与当前菜单的某个子菜单的key匹配, 将菜单的key保存为openKey
    const cItem = item.children.find(cItem => path.indexOf(cItem.key) === 0)
    if (cItem) {
    this.openKey = item.key
    }
 *
 *
 *
 * 设置有权限才会出现页面：
 * 1. 先判断内存中的user信息有无menus，根据menus来显示对应的item
 * 如果当前用户有item对应的权限, 才需要显示对应的菜单项
      if (this.hasAuth(item)) {Item的遍历项}
 *
 * 2. 定义这个显示权限方法
 *  (1) 如果当前用户是admin
    (2) 如果当前item是公开的【首页设置为公开】 menuList 中增加首页默认公开 isPublic:true
    (3) 当前用户有此item的权限: key有没有menus中
    (4) 如果当前用户有此item的某个子item的权限
 *
 * hasAuth=(item)=>{
 *  const key = item.key
 *  const menu = memoryUtils.user.role.menus
 *  if(memoryUtils.user.username==='admin' || item.isPublic || menu.indexOf(key)!==-1){
 *      return trun
 *  }else if(item.children){
 *      强制转换为Boolean类型
 *      retrun !!(item.children.find(child =>  menu.indexOf(child.key)!==-1))
 *  }
 *      return false
 * }
 *
 */
